<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #box1
    {
        width: 300px;
        height: 300px;
        background-color: green;
    }
    #box2
    {
        width: 200px;
        height: 200px;
        background-color: yellow;
    }
    #box3
    {
        width: 150px;
        height: 150px;
        background-color: blue;
    }
    </style>

    <script type="text/javascript">
    window.onload=function()
    {
        //分别为三个div绑定单击响应函数
        var box1=document.getElementById("box1");
        var box2=document.getElementById("box2");
        var box3=document.getElementById("box3");

        //事件的传播
        //关于事件的传播网景公司和微软公司有不同的理解
        //微软公司认为事件应该是由内向外传播，也就是事件触发时，先触发当前元素上的事件
        //然后再向当前元素的祖先元素上传播，事件应该在冒泡阶段执行
        //网景公司认为事件应该是在由外向内传播，也就是当事件触发时，应该先触发当前元素的最外层的祖先元素的事件
        //然后再向内传播给后代元素
        //最后是W3C综合两个公司的方案，将事件传播分成了三个阶段
        //1.捕获阶段 由最外层的祖先元素向目标元素进行事件的捕获，但默认此时不会触发事件
        //2.目标阶段 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
        //3.冒泡阶段 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
        //如果希望在捕获阶段触发事件，可以将addEventListener()的第三个参数设置为true
        //一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
        box1.addEventListener("click",function()
        {
            console.log("我是box1的响应函数");
        },false);
        box2.addEventListener("click",function()
        {
            console.log("我是box2的响应函数");
        },false);
        box3.addEventListener("click",function()
        {
            console.log("我是box3的响应函数");
        },false);
    }
    /*
    function bind(obj,eventStr,callback)
    {
        if(obj.addEventListener)
        {
            obj.addEventListener(event,callback,false);
        }
        else
        {
            obj.attachEvent("on"+eventStr,function()
            {
                callback.call(obj);
            }
            );
        }
    }
    */
    </script>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
</body>
</html>